<template>
  <view class="index" :data-theme="theme()" :class="theme() || ''">
    <view class="bg_image">
      <image :src="bg_image" mode="widthFix"></image>
    </view>
    <view class="register">
      <form @submit="formSubmit" @reset="formReset">
        <view class="register-item">
          <view class="input-label">{{ $t('shop.merchant_name') }}</view>
          <input class="res-inpt" type="text" name="storeName" v-model="form.storeName"
            :placeholder="$t('shop.enter_merchant_name')" />
        </view>
        <view class="register-item">
          <view class="input-label">{{ $t('shop.user_name') }}</view>
          <input class="res-inpt" type="text" name="userName" v-model="form.userName"
            :placeholder="$t('shop.enter_real_name')" />
        </view>
        <view class="register-item">
          <view class="input-label">{{ $t('shop.phone_number') }}</view>
          <input class="res-inpt" type="text" name="mobile" v-model="form.mobile"
            :placeholder="$t('shop.enter_phone_number')" />
        </view>
        <view class="register-item">
          <view class="input-label">{{ $t('shop.login_password') }}</view>
          <input class="res-inpt" type="text" name="password" v-model="form.password" password="true"
            :placeholder="$t('shop.enter_login_password')" />
        </view>
        <view class="register-item" v-if="smsOpen == 1">
          <view class="input-label">{{ $t('shop.verification_code') }}</view>
          <input class="res-inpt" type="text" name="code" v-model="form.code"
            :placeholder="$t('shop.enter_verification_code')" />
          <button class="code-btn theme-borderbtn" v-if="smsOpen == 1" :disabled="isSend" @click="getCode(form.mobile)">
            {{ send_btn_txt }}
          </button>
        </view>
        <picker class="" @change="changeSelect($event)" :range="classify_data_name">
          <view class="register-item d-b-c">
            <view class="input-label">{{ $t('shop.main_business') }}</view>
            <input class="res-inpt" type="text" disabled v-model="categoryName"
              :placeholder="$t('shop.select_main_business')" style="pointer-events: none" />
            <view class="icon iconfont icon-jiantou" style="font-size: 24rpx"></view>
          </view>
        </picker>
        <view class="register-item" style="border: none">
          <input class="res-inpt gray3" type="text" value="" disabled
            :placeholder="$t('shop.upload_license_and_qualifications')" />
        </view>
        <view class="updata">
          <input style="display: none" name="business_id" v-model="form.business_id" />
          <view class="updata-item d-c-c d-c" @click="openUpload('license')" v-if="business_id_path == ''">
            <text class="icon iconfont icon-xiangji"></text>
            <view class="gray9 f22">{{ $t('shop.upload_image') }}</view>
          </view>
          <view class="up-img" v-if="business_id_path != ''" @click="clearImg('license')">
            <image class="up-img" :src="business_id_path" mode="aspectFill" @click="yulan(business_id_path, 1)"></image>
          </view>
        </view>
        <view class="gray9 f26"> {{ $t('shop.img_format_tip') }} </view>
        <view class="login_index_btn">
          <button class="theme-bg" form-type="submit" type="default"> {{ $t('shop.submit_application') }}

          </button>
        </view>
        <Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">{{ $t('shop.upload_image') }}
        </Upload>
      </form>
    </view>
  </view>
</template>

<script>
import Upload from "@/components/upload/upload.vue";
export default {
  components: {
    Upload
  },
  data() {
    return {
      form: {
        image_frontid: 0,
        business_id: 0,
        mobile: "",
        password: ""
      },
      isupload: false,
      type: "frontid",
      image_frontid_path: "",
      business_id_path: "",
      bg_image: "",
      classify_data_name: "",
      //列表名字
      classify_data_id: "",
      //列表id
      categoryName: "",
      //当前选中的列表名字
      categoryId: "",
      //当前选中的列表id

      /*当前秒数*/
      second: 60,
      send_btn_txt: this.$t("shop.get_verification_code"),
      /*是否已发验证码*/
      is_send: false,
      smsOpen: 0
    };
  },
  created() {
    this.getData();
    this.get_classify();
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t('common.supplier_entry')
    })
  },
  methods: {
    /*改变发送验证码按钮文本*/
    changeMsg() {
      if (this.second > 0) {
        this.send_btn_txt = this.second + this.$t("shop.seconds");
        this.second--;
        setTimeout(this.changeMsg, 1000);
      } else {
        this.send_btn_txt = this.$t("shop.get_verification_code");
        this.second = 60;
        this.is_send = false;
      }
    },
    /*获取数据*/
    getData() {
      let self = this;
      self._post("user/index/index", {}, function (res) {
        self.bg_image = res.data.setting.supplierImage;
      });
    },
    //获取验证码
    getCode(mobile) {
      let self = this;
      self._post("supplier/apply/sendCode", {
        mobile: mobile
      }, function (res) {
        self.is_send = true;
        self.changeMsg();
      });
    },
    //获取分类
    get_classify() {
      let self = this;
      self._post("supplier/apply/category", {}, function (res) {
        let list_name = [];
        let list_id = [];
        //合成select列表
        for (var i = 0; i < res.data.list.length; i++) {
          list_name.push(res.data.list[i].name);
        }
        //合成上传所需id数组
        for (var i2 = 0; i2 < res.data.list.length; i2++) {
          list_id.push(res.data.list[i2].categoryId);
        }
        self.classify_data_name = list_name;
        self.classify_data_id = list_id;
        self.smsOpen = res.data.smsOpen;
      });
    },
    //选择分类
    select() {
      let self = this;
      uni.showActionSheet({
        itemList: self.classify_data_name,
        success: function (res) {
          self.categoryName = self.classify_data_name[res.tapIndex];
          self.categoryId = self.classify_data_id[res.tapIndex];
        },
        fail: function (res) { }
      });
    },
    /*提交*/
    formSubmit: function (e) {
      let self = this;
      var formdata = e.detail.value;
      formdata.businessId = self.form.business_id;
      console.log(formdata);
      console.log(self.form);
      formdata.categoryId = self.categoryId;
      if (self.categoryName == "") {
        uni.showToast({
          title: this.$t("shop.fill_in_main_category"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      if (formdata.storeName == "") {
        uni.showToast({
          title: this.$t("shop.enter_merchant_name"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      if (formdata.businessId == 0) {
        uni.showToast({
          title: this.$t("shop.upload_business_license"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      if (formdata.userName == "") {
        uni.showToast({
          title: this.$t("shop.enter_real_name"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      if (formdata.mobile == "") {
        uni.showToast({
          title: this.$t("shop.enter_phone_number"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      if (formdata.code == "" && self.smsOpen == 1) {
        uni.showToast({
          title: this.$t("shop.enter_verification_code0"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      if (formdata.password == "") {
        uni.showToast({
          title: this.$t("shop.enter_password"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
      if (!reg.test(formdata.mobile)) {
        uni.showToast({
          title: this.$t("shop.invalid_phone_format"),
          duration: 1000,
          icon: "none"
        });
        return false;
      }
      uni.showLoading({
        title: this.$t("shop.submitting"),
        mask: true
      });
      self._postBody("supplier/apply/index", formdata, function (res) {
        self.showSuccess(res.msg, function () {
          self.gotoPage("/pages/shop/application_status");
        }, null, function () {
          uni.hideLoading();
        });
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    clearImg() {
      this.business_id_path = "";
      this.form.business_id = "";
    },
    /*获取图片*/
    getImgsFunc(e) {
      console.log(e);
      if (e != null && e.length > 0) {
        this.business_id_path = e[0].filePath;
        this.form.business_id = e[0].fileId;
      }
      this.isupload = false;
    },
    /* 下拉框 */
    changeSelect(e) {
      console.log(e);
      this.categoryId = this.classify_data_id[e.detail.value];
      this.categoryName = this.classify_data_name[e.detail.value];
    }
  }
};
</script>

<style lang="scss">
.register-item {
  height: 88rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  .input-label {
    font-size: 26rpx;
    color: #333;
    width: 160rpx;
    white-space: nowrap;
  }

  .res-inpt {
    font-size: 26rpx;
    color: #999;
    flex: 1;
  }

  .res-inpt.gray3 {
    color: #333;
  }
}

.bg_image image {
  width: 100%;
}

.iconfont {
  font-size: 48rpx;
}

.index {
  width: 750rpx;
}

.register {
  width: 675rpx;
  margin: 0 auto;
  border-radius: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: white;
  position: absolute;
  top: 260rpx;
  left: 37.5rpx;
  margin-bottom: 50rpx;
}

.code-btn {
  width: 172rpx;
  height: 56rpx;
  line-height: 56rpx;
  border: 1rpx #e2231a solid;
  border-radius: 40rpx;
  font-size: 26rpx;
  color: #e2231a;
  padding: 0 20rpx;
}

.updata {
  margin-bottom: 20rpx;
}

.updata-item {
  width: 136rpx;
  height: 136rpx;
  background: #ffffff;
  border-radius: 15rpx;
  border: 1px solid #eeeeee;

  .icon-xiangji {
    font-size: 40rpx;
    color: #999;
  }
}

.up-img {
  display: block;
  width: 136rpx;
  height: 136rpx;
  border-radius: 15rpx;
}

.login_index_btn {
  margin-top: 40rpx;
  margin-bottom: 30rpx;
}

.login_index_btn button {
  width: 90%;
  height: 80rpx;
  background-color: #f36a24;
  border-radius: 50rpx;
  line-height: 80rpx;
  margin: 0 auto;
  color: white;
  font-size: 30rpx;
}

.make-item {
  padding-left: 60rpx;
}
</style>
